import './index.scss'
import { Spin, Row, Col, Card, Typography, Flex, Divider } from 'antd'
import { useState } from 'react'
import RingChart from '@/components/RingChart';
import Riskratio from '@/components/Riskratio';
import Linechart from '@/components/Linechart';
const { Title, Text } = Typography
export default function Dashboard() {
    const chartBoxHeight = 360;
    const [isloading, setisloading] = useState(false)
    const [riskratiodata,setriskratiodata] = useState([
        { value: 305, name: "成员单位名称1" },
        { value: 310, name: "成员单位名称2" },
        { value: 204, name: "成员单位名称3" }
    ])
    const [xAxisData,setxAxisData] = useState(["1", "2", "3", "4", "5", "6", "7", "8", "9"])
    const [dealnum,setdealnum] = useState({
        yName:[
            {
                name:'企业数(个)',
            },
            {
                name:'交易量(万元)'
            }
        ],
        data: [
            {
                name: '企业数',
                data: [64, 159, 112, 86, 151, 131, 118,232,23]
            },
            {
                name: '交易量',
                data: [124, 30, 77, 97, 67, 75, 70,334,123]
            }
        ]
    })

        
    return (
        <Spin tip="页面加载中..." spinning={isloading} size='large'>
            <Row className='dashboard-container' gutter={[12, 12]}>
                <Col span={12}>
                    <Flex vertical gap={12} className="box">
                        <Title level={5}>交易对手统计</Title>
                        <Row gutter={12}>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>小微企业</Text>
                                            <Title className="score" level={2}>30</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={30} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源司库分析挖掘平台</Text>
                                </Flex>
                            </Col>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>用户动态标签</Text>
                                            <Title className="score" level={2}>30</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={30} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源网站、小程序</Text>
                                </Flex>
                            </Col>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>用户标签</Text>
                                            <Title className="score" level={2}>40</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={40} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源网站、小程序</Text>
                                </Flex>
                            </Col>
                        </Row>
                    </Flex>
                </Col>
                <Col span={12}>
                    <Flex vertical gap={12} className="box">
                        <Title level={5}>成员单位统计</Title>
                        <Row gutter={12}>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>企业静态标签</Text>
                                            <Title className="score" level={2}>20</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={20} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源网站、小程序</Text>
                                </Flex>
                            </Col>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>企业动态标签</Text>
                                            <Title className="score" level={2}>30</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={30} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源网站、小程序</Text>
                                </Flex>
                            </Col>
                            <Col span={8}>
                                <Flex vertical className="item">
                                    <Flex justify="space-between">
                                        <div>
                                            <Text strong>企业业务标签</Text>
                                            <Title className="score" level={2}>50</Title>
                                        </div>
                                        <div className='mark-chart'>
                                            <RingChart percent={50} />
                                        </div>
                                    </Flex>
                                    <Divider className='line' />
                                    <Text className="desc">数据来源网站、小程序</Text>
                                </Flex>
                            </Col>
                        </Row>
                    </Flex>
                </Col>
                <Col span={24}>
                    <Flex vertical gap={12} className="box">
                        <Title level={5}>画像分群统计</Title>
                        <Row gutter={12}>
                            <Col span={6}>
                                <Flex className="group" justify="space-between" align='center'>
                                    <Flex vertical>
                                        <Text strong>成员单位分群</Text>
                                        <Text className="desc">数据来源网站、小程序</Text>
                                    </Flex>
                                    <Title className="score" level={3}>114</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex className="group" justify="space-between" align='center'>
                                    <Flex vertical>
                                        <Text strong>交易对手分群</Text>
                                        <Text className="desc">已创建的企业分群总数</Text>
                                    </Flex>
                                    <Title className="score" level={3}>108</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex className="group" justify="space-between" align='center'>
                                    <Flex vertical>
                                        <Text strong>累计成员单位数</Text>
                                        <Text className="desc">系统内，所有成员单位数</Text>
                                    </Flex>
                                    <Title className="score" level={3}>189</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex className="group" justify="space-between" align='center'>
                                    <Flex vertical>
                                        <Text strong>累计交易对手数</Text>
                                        <Text className="desc">系统内，所有交易对手数序</Text>
                                    </Flex>
                                    <Title className="score" level={3}>216</Title>
                                </Flex>
                            </Col>
                        </Row>
                    </Flex>
                </Col>
                <Col span={12}>
                    <Flex vertical gap={12} className="box">
                        <Title level={5}>9月风险占比</Title>
                        <Row gutter={12}>
                            <Col span={6}>
                                <Flex vertical className='risk'>
                                    <Text>风险总数</Text>
                                    <Title level={4}>600</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex vertical className='risk'>
                                    <Text>空转走单</Text>
                                    <Title level={4}>200</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex vertical className='risk'>
                                    <Text>循环贸易</Text>
                                    <Title level={4}>200</Title>
                                </Flex>
                            </Col>
                            <Col span={6}>
                                <Flex vertical className='risk'>
                                    <Text>体外循环</Text>
                                    <Title level={4}>200</Title>
                                </Flex>
                            </Col>
                        </Row>
                        <div className="chart-box" style={{ width: '100%', height: chartBoxHeight - 78 }}>
                            <Riskratio data={riskratiodata}/>
                        </div>
                    </Flex>
                </Col>
                <Col span={12}>
                    <Flex vertical gap={12} className="box">
                        <Title level={5}>1-9月涉贸易风险企业及交易量</Title>
                        <div className="chart-box" style={{ width: '100%', height: chartBoxHeight }}>
                            <Linechart xAxisData={xAxisData} data={dealnum}/>
                        </div>
                    </Flex>
                </Col>
            </Row>
        </Spin>
    )
}
